<template>
  <div>
    <el-card style="margin: 20px 0px">
      <!-- 头部 -->
      <div class="header">
        <el-tabs class="tab" v-model="activeName">
          <el-tab-pane label="销售额" name="sale"></el-tab-pane>
          <el-tab-pane label="访问量" name="visite"></el-tab-pane>
        </el-tabs>
        <div class="header_right">
          <span 
            :class="item.isActive ? 'dayactive' : ''" 
            v-for="(item, index) in timeList" 
            :key="item.id" 
            @click="selectCycle(item.cycle)">
            {{item.cycle}}
          </span>
          <el-date-picker
            v-model="date"
            size="mini"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          >
          </el-date-picker>
        </div>
      </div>
      <!-- 中间，门店销售 -->
      <div>
        <el-row :gutter="20">
          <el-col :span="18">
            <!-- 容器 -->
            <div class="charts" ref="charts"></div>
          </el-col>
          <el-col :span="6" class="right">
            <h3>门店{{title}}排名</h3>
            <ul v-if="listState.orderRank == null">
                <li v-for="(item, index) in storesInfo" :key="item.id">
                    <span :class="item.rindex">{{item.id}}</span>
                    <span>{{item.storesName}}</span>
                    <span>{{item.storesAddress}}</span>
                </li>
            </ul>
            <ul v-else-if="title == '销售额'">
                <li v-for="(item, index) in listState.orderRank" :key="item.no">
                    <span :class="item.rindex">{{item.no}}</span>
                    <span>{{item.name}}</span>
                    <span>{{item.money}}</span>
                </li>
            </ul>
            <ul v-else-if="title == '访问量'">
                <li v-for="(item, index) in listState.userRank" :key="item.no">
                    <span :class="item.rindex">{{item.no}}</span>
                    <span>{{item.name}}</span>
                    <span>{{item.money}}</span>
                </li>
            </ul>
          </el-col>
        </el-row>
      </div>
    </el-card>
  </div>
</template>

<script>
import echarts from "echarts";
import dayjs from "dayjs"
import {mapState} from "vuex"
export default {
  name: "Sale",
  data() {
    return {
      activeName: "sale",
      timeList: [
        {id: 0, cycle: "今日", isActive: false},
        {id: 1, cycle: "本周", isActive: false},
        {id: 2, cycle: "本月", isActive: false},
        {id: 3, cycle: "本年", isActive: true},
      ],
      storesInfo: [
        {id: 1, storesName: "肯德基", storesAddress: "广州科学城店", rindex: "rindex"},
        {id: 2, storesName: "麦当劳", storesAddress: "广州智慧城店", rindex: "rindex"},
        {id: 3, storesName: "星巴克", storesAddress: "广州神州路店", rindex: "rindex"},
        {id: 4, storesName: "奈雪的茶", storesAddress: "广州北京路店"},
        {id: 5, storesName: "沪上阿姨", storesAddress: "广州体育西路店"},
        {id: 6, storesName: "丘大叔", storesAddress: "广州珠江新城店"},
        {id: 7, storesName: "茶百道", storesAddress: "广州小蛮腰店"}
      ],
      myCharts: null,
      date: [],
    };
  },
  computed: {
    title(){
      return this.activeName == 'sale' ? "销售额" : "访问量"
    },
    ...mapState({
      listState: state => state.home.list,
    }),
  },
  mounted() {
    // 初始化表格数据
    this.myCharts = echarts.init(this.$refs.charts);
    this.myCharts.setOption({
      title: {
        text: this.title + "趋势",
      },
      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "shadow",
        },
      },
      grid: {
        left: "3%",
        right: "4%",
        bottom: "3%",
        containLabel: true,
      },
      xAxis: [
        {
          type: "category",
          data: [ "1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月"],
          axisTick: {
            alignWithLabel: true,
          },
        },
      ],
      yAxis: [
        {
          type: "value",
        },
      ],
      series: [
        {
          name: "Direct",
          type: "bar",
          barWidth: "60%",
          data: [410, 82, 200, 334, 390, 330, 220, 150, 82, 200, 134, 290],
          color: "#546fc6"
        },
      ],
    });
    // 默认显示当前年数据
    const start = dayjs().startOf("year").format("YYYY-MM-DD")
    const end = dayjs().endOf("year").format("YYYY-MM-DD")
    this.date = [start, end]
  },
  methods:{
    // 收集日期
    selectCycle(cycle){
      this.timeList.forEach(item => {
        item.isActive = false
        if(item.cycle == cycle){
          item.isActive = true
        }
      })
      if(cycle == "今日"){
        const start = dayjs().format("YYYY-MM-DD")
        this.date = [start, start]
      }
      if(cycle == "本周"){
        const start = dayjs().day(1).format("YYYY-MM-DD")
        const end = dayjs().day(7).format("YYYY-MM-DD")
        this.date = [start, end]
      }
      if(cycle == "本月"){
        const start = dayjs().startOf("month").format("YYYY-MM-DD")
        const end = dayjs().endOf("month").format("YYYY-MM-DD")
        this.date = [start, end]
      }
       if(cycle == "本年"){
        const start = dayjs().startOf("year").format("YYYY-MM-DD")
        const end = dayjs().endOf("year").format("YYYY-MM-DD")
        this.date = [start, end]
      }
    },
  },
  watch: {
    title(){
      this.myCharts.setOption({
        title: {
          text: this.title + "趋势",
        },
        xAxis: {
          data: this.title == "销售额" ? this.listState.orderFullYearAxis : this.listState.userFullYearAxis
        },
        series: [
          {
          name: "Direct",
          type: "bar",
          barWidth: "60%",
          data: this.title == "销售额" ? this.listState.orderFullYear : this.listState.userFullYear,
          color: "#546fc6"
        },
        ]
      })
    },
    // 监听listState，有数据返回默认显示销售额
    listState(){
      this.myCharts.setOption({
      title: {
        text: this.title + "趋势",
      },
      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "shadow",
        },
      },
      grid: {
        left: "3%",
        right: "4%",
        bottom: "3%",
        containLabel: true,
      },
      xAxis: [
        {
          type: "category",
          data: this.listState.orderFullYearAxis,
          axisTick: {
            alignWithLabel: true,
          },
        },
      ],
      yAxis: [
        {
          type: "value",
        },
      ],
      series: [
        {
          name: "Direct",
          type: "bar",
          barWidth: "60%",
          data: this.listState.orderFullYear,
          color: "#546fc6"
        },
      ],
    });
    },
  }
};
</script>

<style scoped>
.header {
  position: relative;
  display: flex;
  justify-content: space-between;
}
.tab {
  width: 100%;
}
.header_right {
  position: absolute;
  right: 0px;
}
.header_right span {
  margin: 0px 10px;
  cursor: pointer;
}
.dayactive{
  background-color: aqua;
}
.charts {
  width: 100%;
  height: 300px;
}
ul {
  list-style: none;
  width: 100%;
  height: 300px;
  padding: 0px;
}
ul li {
  height: 8%;
  margin: 10px 0px;
}
li span:nth-child(2){
    margin: 0 20px;
}
.rindex {
  float: left;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: black;
  color: white;
  text-align: center;
  margin-left: -5px;
}
li span:nth-child(3) {
  float: right;
  margin-right: 10px;
}
</style>